<template>
  <div>
    <el-card class="page-tools">
      <el-row align="middle" justify="space-between" type="flex">
        <el-col class="el-col">
          工编单号:
          <el-input placeholder="请输入" style="width: 240px"></el-input>
          工单状态:
          <el-select placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button icon="el-icon-search" type="primary">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="page-tools2">
      <el-row align="middle" justify="space-between" type="flex">
        <el-col class="el-card1">
          <div>
            <el-button
              class="button1"
              icon="el-icon-search"
              style="background-color: #ff7f34; color: white"
              >搜索
            </el-button>
            <el-button style="background-color: #fbf4f0">工单配置</el-button>
          </div>
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#f3f6fb' }"
            class="customer-no-border-table"
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" width="80">
            </el-table-column>
            <el-table-column label="工单编号" prop="taskCode" width="147">
            </el-table-column>
            <el-table-column label="设备编号" prop="innerCode" width="147">
            </el-table-column>
            <el-table-column label="工单类型" prop="" width="147"
              >维修工单
            </el-table-column>
            <el-table-column label="工单方式" prop="" width="147"
              >自动
            </el-table-column>
            <el-table-column label="工单状态" prop="" width="147"
              >待办
            </el-table-column>
            <el-table-column label="运营人员" prop="userName" width="147">
            </el-table-column>
            <el-table-column label="创建日期" prop="updateTime" width="165">
            </el-table-column>
            <el-table-column label="操作" width="100">
              <p class="xiangq">查看详细</p>
            </el-table-column>
          </el-table>
          <div class="botton">
            <span
              >共{{ params.total }}条记录 第 {{ params.pageIndex }}/{{
                params.totalPage
              }}
              页</span
            >
            <el-pagination
              :current-page.sync="params.pageIndex"
              :page-size.sync="params.pageSize"
              :page-sizes="[2, 3, 5, 10]"
              :total="params.total"
              background
              layout="prev, next"
              @size-change="maintenanceApi"
              @current-change="maintenanceApi"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { maintenanceApi } from "@/api/user";

export default {
  name: "PageTools",
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "待办",
        },
        {
          value: "选项2",
          label: "进行",
        },
        {
          value: "选项3",
          label: "取消",
        },
        {
          value: "选项4",
          label: "完成",
        },
      ],
      tableData: [],

      params: {
        total: "",
        totalPage: "",
        pageIndex: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    async maintenanceApi() {
      try {
        const res = await maintenanceApi(this.params);
        // console.log(res);
        this.tableData = res.currentPageRecords;
        this.params.total = res.totalCount;
        this.params.totalPage = res.totalPage;
        console.log(this.totalPage);
      } catch (e) {
        console.log(e);
      }
    },
  },
  created() {
    this.maintenanceApi();
  },
};
</script>

<style lang="scss">
.page-tools {
  .before {
    line-height: 34px;
    display: inline-block;
    border-radius: 3px;

    .el-col {
      display: flex;
    }
  }
}

.page-tools2 {
  margin-top: 30px;

  .before {
    line-height: 34px;
    display: inline-block;
    border-radius: 3px;
  }

  .el-card1 {
    .botton {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;

      span {
        color: #dbdfe5;
      }
    }

    .xiangq {
      color: blue;
    }

    .el-table {
      margin-top: 20px;
    }

    .customer-no-border-table th {
      border: none;
    }

    .customer-no-border-table td,
    .customer-no-border-table th.is-leaf {
      border: none;
    }

    /*表格最外边框*/
    .customer-no-border-table .el-table--border,
    .el-table--group {
      border: none;
    }

    /*头部边框*/
    .customer-no-border-table thead tr th.is-leaf {
      border: 0px solid #ebeef5;
      border-right: none;
    }

    .customer-no-border-table thead tr th:nth-last-of-type(2) {
      border-right: 0px solid #ebeef5;
    }

    /*表格最外层边框-底部边框*/
    .customer-no-border-table .el-table--border::after,
    .customer-no-border-table .el-table--group::after {
      width: 0;
    }

    .customer-no-border-table::before {
      width: 0;
    }

    .customer-no-border-table .el-table__fixed-right::before,
    .el-table__fixed::before {
      width: 0;
    }

    .customer-no-border-table .el-table__header tr th {
      background: #fff;
      color: #333333;
      padding: 3px;
      fontweight: 550;
      height: 36px;
      border: 0px;
      font-size: 15px;
    }
  }
}
</style>
